<template>
	<view class="homepage-container">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="navbar-left" @click="goBack">
				<u-icon name="arrow-left" size="40" color="#fff"></u-icon>
			</view>
			<view class="navbar-right">
				<view class="nav-btn" @click="setBackground">
					<text class="btn-text">设置背景</text>
					<u-icon name="photo" size="32" color="#fff"></u-icon>
				</view>
				<u-icon name="search" size="40" color="#fff" @click="toSearch"></u-icon>
				<u-icon name="share" size="40" color="#fff" @click="share"></u-icon>
			</view>
		</view>
		
		<!-- 用户资料区域 -->
		<view class="profile-section">
			<view class="profile-content">
				<!-- 左侧头像 -->
				<view class="avatar-wrapper">
					<view class="avatar">
						<image :src="avatarUrl" mode="aspectFill"></image>
					</view>
				</view>
				
				<!-- 右侧信息 -->
				<view class="info-wrapper">
					<view class="info-header">
						<view class="info-main">
							<view class="username">{{nickname || randomName}}</view>
							<view class="uid">UID: {{userId || '2310100086'}}</view>
							<view class="ip-location">IP属地: {{ipLocation || '北京'}}</view>
							<view class="signature" @click="editSignature">
								{{signature || '点击这里,填写个性签名'}}
							</view>
							<view class="tags">
								<view class="tag level-tag">Lv.{{userLevel}}</view>
								<view class="tag gender-tag" :class="{'male': userGender === 1, 'female': userGender === 2}">
									<text class="gender-symbol" v-if="userGender === 1">♂</text>
									<text class="gender-symbol" v-else-if="userGender === 2">♀</text>
									<text>{{genderText}}</text>
								</view>
							</view>
							<view class="stats">
								<view class="stat-item" @click="toFollowList">
									<text class="stat-number">{{followCount}}</text>
									<text class="stat-label">关注</text>
								</view>
								<view class="stat-item" @click="toFansList">
									<text class="stat-number">{{fansCount}}</text>
									<text class="stat-label">粉丝</text>
								</view>
								<view class="stat-item" @click="toLikesList">
									<text class="stat-number">{{formatLikes(likesCount)}}</text>
									<text class="stat-label">获赞</text>
								</view>
							</view>
						</view>
						<view class="edit-btn" @click="editProfile">编辑资料</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 内容导航标签 -->
		<view class="tabs-section">
			<view 
				class="tab-item" 
				:class="{ active: currentTab === 'article' }" 
				@click="switchTab('article')"
			>
				文章
			</view>
			<view 
				class="tab-item" 
				:class="{ active: currentTab === 'video' }" 
				@click="switchTab('video')"
			>
				视频
			</view>
		</view>
		
		<!-- 内容列表 -->
		<scroll-view class="content-scroll" scroll-y>
			<view class="content-list" v-if="currentTab === 'article'">
				<view 
					class="article-item" 
					v-for="(item, index) in articleList" 
					:key="index"
					@click="viewArticle(item)"
				>
					<view class="article-image-wrapper">
						<image class="article-image" :src="item.image" mode="aspectFill"></image>
						<view class="top-badge" v-if="item.isTop">置顶</view>
						<view class="view-count">
							<u-icon name="eye" size="24" color="#fff"></u-icon>
							<text>{{item.viewCount}}</text>
						</view>
					</view>
					<view class="article-info">
						<view class="article-title">{{item.title}}</view>
						<view class="article-author">
							<image class="author-avatar" :src="avatarUrl" mode="aspectFill"></image>
							<text class="author-name">{{nickname || randomName}}</text>
							<text class="ellipsis">...</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="content-list" v-else>
				<view class="empty-tip">暂无视频内容</view>
			</view>
			
			<!-- 底部提示 -->
			<view class="list-end-tip" v-if="articleList.length > 0">
				<view class="end-line"></view>
				<text class="end-text">到底了哦</text>
				<view class="end-line"></view>
			</view>
		</scroll-view>
		
		<u-toast ref="uToast" />
		<u-modal v-model="showSignatureModal" title="编辑个性签名" :show-cancel-button="true" @confirm="saveSignature">
			<view class="modal-content">
				<u-input 
					v-model="editSignatureValue" 
					placeholder="请输入个性签名" 
					maxlength="50" 
					:clearable="true"
				></u-input>
			</view>
		</u-modal>
	</view>
</template>

<script>
import $api from '../../api/user.js';

export default {
	data() {
		return {
			statusBarHeight: 0,
			avatarUrl: require('../../static/image/user/avatar.jpg'),
			nickname: '',
			randomName: '旅行者',
			userId: null,
			userLevel: 1,
			userGender: 0,
			ipLocation: '北京',
			signature: '',
			followCount: 0,
			fansCount: 0,
			likesCount: 0,
			currentTab: 'article',
			articleList: [],
			showSignatureModal: false,
			editSignatureValue: ''
		}
	},
	computed: {
		genderText() {
			if (this.userGender === 1) {
				return '男';
			} else if (this.userGender === 2) {
				return '女';
			}
			return '未知';
		}
	},
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 0;
		
		// 加载用户信息
		this.loadUserInfo();
		
		// 加载文章列表
		this.loadArticleList();
		
		// 从本地存储加载统计数据
		this.loadStatsFromStorage();
	},
	created() {
		// 监听统计数据同步事件
		uni.$on('statsDataChanged', (data) => {
			if (data.followCount !== undefined) {
				this.followCount = data.followCount;
			}
			if (data.fansCount !== undefined) {
				this.fansCount = data.fansCount;
			}
			if (data.likesCount !== undefined) {
				this.likesCount = data.likesCount;
			}
		});
	},
	onShow() {
		// 页面显示时从本地存储同步统计数据
		this.loadStatsFromStorage();
	},
	beforeDestroy() {
		// 移除事件监听
		uni.$off('statsDataChanged');
	},
	methods: {
		// 加载用户信息
		loadUserInfo() {
			const user = uni.getStorageSync('user');
			if (user) {
				this.userId = user.id;
				this.nickname = user.nickname || '';
				this.userLevel = user.level || 0;
				this.userGender = user.gender !== undefined ? user.gender : 0;
				if (user.avatar) {
					this.avatarUrl = user.avatar;
				}
				// 生成随机名字（如果没有昵称）
				if (!this.nickname) {
					this.generateRandomName();
				}
			} else {
				this.generateRandomName();
			}
			
			// 从本地存储加载个性签名
			this.signature = uni.getStorageSync('user_signature') || '';
		},
		// 从本地存储加载统计数据
		loadStatsFromStorage() {
			const stats = uni.getStorageSync('user_stats');
			if (stats) {
				if (stats.followCount !== undefined) {
					this.followCount = stats.followCount;
				}
				if (stats.fansCount !== undefined) {
					this.fansCount = stats.fansCount;
				}
				if (stats.likesCount !== undefined) {
					this.likesCount = stats.likesCount;
				}
			}
		},
		// 保存统计数据到本地存储
		saveStatsToStorage() {
			uni.setStorageSync('user_stats', {
				followCount: this.followCount,
				fansCount: this.fansCount,
				likesCount: this.likesCount
			});
			// 发送同步事件
			uni.$emit('statsDataChanged', {
				followCount: this.followCount,
				fansCount: this.fansCount,
				likesCount: this.likesCount
			});
		},
		
		// 生成随机名字
		generateRandomName() {
			try {
				const user = uni.getStorageSync('user');
				let userIdentifier = '';
				if (user) {
					if (user.phone && user.phone.trim()) {
						userIdentifier = user.phone;
					} else if (user.username && user.username.trim()) {
						userIdentifier = user.username;
					}
				}
				if (!userIdentifier) {
					const token = uni.getStorageSync('token') || '';
					userIdentifier = token;
				}
				if (!userIdentifier) {
					this.randomName = '旅行者';
					return;
				}
				const nameList = [
					'旅行者', '探索者', '冒险家', '漫游者', '行者', '游侠',
					'追风者', '逐梦人', '自由人', '背包客', '旅人', '过客',
					'风景猎人', '城市漫步者', '山川行者', '海岸追光者', '星空守望者',
					'云游四方', '踏遍山河', '寻梦之旅', '心之所向', '诗和远方',
					'风一样的', '雨中的', '阳光下的', '月光里的', '晨曦中的',
					'小旅行家', '大冒险家', '新探索者', '老游侠', '资深旅人',
					'梦想家', '追光者', '拾光者', '时光旅人', '远方来客'
				];
				const hashValue = Math.abs(this.hashCode(userIdentifier));
				const nameIndex = hashValue % nameList.length;
				this.randomName = nameList[nameIndex];
			} catch (e) {
				console.error('生成随机名字失败', e);
				this.randomName = '旅行者';
			}
		},
		
		hashCode(str) {
			let hash = 0;
			if (str.length === 0) return hash;
			for (let i = 0; i < str.length; i++) {
				const char = str.charCodeAt(i);
				hash = ((hash << 5) - hash) + char;
				hash = hash & hash;
			}
			return hash;
		},
		
		// 加载文章列表
		loadArticleList() {
			// 模拟文章数据
			this.articleList = [
				{
					id: 1,
					title: '和家人果断在北京续住3天的神仙小院',
					image: require('../../static/image/user/avatar.jpg'),
					viewCount: 10,
					isTop: true
				},
				{
					id: 2,
					title: '北京周末去哪,找到了人少景美的仙境了!',
					image: require('../../static/image/user/avatar.jpg'),
					viewCount: 512,
					isTop: false
				}
			];
		},
		
		// 切换标签
		switchTab(tab) {
			this.currentTab = tab;
			if (tab === 'video') {
				// 加载视频列表
				uni.showToast({
					title: '视频功能开发中',
					icon: 'none'
				});
			}
		},
		
		// 格式化获赞数
		formatLikes(count) {
			if (count < 10000) {
				return count.toString();
			} else if (count < 100000000) {
				return (count / 10000).toFixed(1) + '万';
			} else {
				return (count / 100000000).toFixed(1) + '亿';
			}
		},
		
		// 返回
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		
		// 设置背景
		setBackground() {
			uni.showToast({
				title: '设置背景功能开发中',
				icon: 'none'
			});
		},
		
		// 搜索
		toSearch() {
			uni.showToast({
				title: '搜索功能开发中',
				icon: 'none'
			});
		},
		
		// 分享
		share() {
			uni.showToast({
				title: '分享功能开发中',
				icon: 'none'
			});
		},
		
		// 编辑个性签名
		editSignature() {
			this.editSignatureValue = this.signature;
			this.showSignatureModal = true;
		},
		
		// 保存个性签名
		saveSignature() {
			this.signature = this.editSignatureValue;
			uni.setStorageSync('user_signature', this.signature);
			this.$refs.uToast.show({
				title: '保存成功',
				type: 'success'
			});
		},
		
		// 编辑资料
		editProfile() {
			uni.navigateTo({
				url: './info'
			});
		},
		
		// 查看文章
		viewArticle(item) {
			uni.showToast({
				title: '查看文章详情',
				icon: 'none'
			});
		},
		
		// 跳转到关注列表
		toFollowList() {
			uni.showToast({
				title: '关注列表功能开发中',
				icon: 'none'
			});
		},
		
		// 跳转到粉丝列表
		toFansList() {
			uni.showToast({
				title: '粉丝列表功能开发中',
				icon: 'none'
			});
		},
		
		// 跳转到获赞列表
		toLikesList() {
			uni.showToast({
				title: '获赞列表功能开发中',
				icon: 'none'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #f5f5f5;
}

.homepage-container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.status-bar {
	width: 100%;
	background-color: #2c2c2c;
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background-color: #2c2c2c;
	
	.navbar-left {
		display: flex;
		align-items: center;
	}
	
	.navbar-right {
		display: flex;
		align-items: center;
		gap: 30rpx;
		
		.nav-btn {
			display: flex;
			align-items: center;
			gap: 8rpx;
			
			.btn-text {
				font-size: 26rpx;
				color: #fff;
			}
		}
	}
}

.profile-section {
	background-color: #2c2c2c;
	padding: 30rpx;
	padding-bottom: 40rpx;
	
	.profile-content {
		display: flex;
		align-items: flex-start;
		
		.avatar-wrapper {
			margin-right: 30rpx;
			
			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #f5f5f5;
				border: 4rpx solid #fff;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.info-wrapper {
			flex: 1;
			display: flex;
			flex-direction: column;
			
			.info-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				
				.info-main {
					flex: 1;
					
					.username {
						font-size: 40rpx;
						font-weight: bold;
						color: #fff;
						margin-bottom: 12rpx;
					}
					
					.uid {
						font-size: 24rpx;
						color: #999;
						margin-bottom: 8rpx;
					}
					
					.ip-location {
						font-size: 24rpx;
						color: #999;
						margin-bottom: 16rpx;
					}
					
					.signature {
						font-size: 26rpx;
						color: #ccc;
						margin-bottom: 16rpx;
						padding: 12rpx;
						background-color: rgba(255, 255, 255, 0.1);
						border-radius: 8rpx;
						min-height: 60rpx;
					}
					
					.tags {
						display: flex;
						align-items: center;
						gap: 12rpx;
						margin-bottom: 20rpx;
						
						.tag {
							padding: 6rpx 16rpx;
							border-radius: 30rpx;
							font-size: 22rpx;
							
							&.level-tag {
								background-color: #FF9500;
								color: #fff;
							}
							
							&.gender-tag {
								&.male {
									background-color: #E5F3FF;
									color: #4A90E2;
									border: 1rpx solid #4A90E2;
								}
								
								&.female {
									background-color: #FFE5E5;
									color: #FF6B6B;
									border: 1rpx solid #FF6B6B;
								}
								
								.gender-symbol {
									margin-right: 4rpx;
									font-weight: bold;
								}
							}
						}
					}
					
					.stats {
						display: flex;
						gap: 40rpx;
						
						.stat-item {
							display: flex;
							flex-direction: column;
							align-items: center;
							
							.stat-number {
								font-size: 32rpx;
								font-weight: bold;
								color: #fff;
								margin-bottom: 6rpx;
							}
							
							.stat-label {
								font-size: 24rpx;
								color: #999;
							}
						}
					}
				}
				
				.edit-btn {
					padding: 12rpx 24rpx;
					background-color: #4A90E2;
					color: #fff;
					border-radius: 40rpx;
					font-size: 26rpx;
					white-space: nowrap;
					margin-left: 20rpx;
				}
			}
		}
	}
}

.tabs-section {
	display: flex;
	background-color: #fff;
	border-bottom: 1rpx solid #e5e5e5;
	
	.tab-item {
		flex: 1;
		text-align: center;
		padding: 24rpx 0;
		font-size: 30rpx;
		color: #666;
		position: relative;
		
		&.active {
			color: #4A90E2;
			font-weight: bold;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 60rpx;
				height: 4rpx;
				background-color: #4A90E2;
				border-radius: 2rpx;
			}
		}
	}
}

.content-scroll {
	height: calc(100vh - 600rpx);
}

.content-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
	padding: 20rpx;
	
	.article-item {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		
		.article-image-wrapper {
			position: relative;
			width: 100%;
			height: 300rpx;
			
			.article-image {
				width: 100%;
				height: 100%;
			}
			
			.top-badge {
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				padding: 4rpx 12rpx;
				background-color: #FFCF31;
				color: #333;
				font-size: 20rpx;
				border-radius: 4rpx;
				font-weight: bold;
			}
			
			.view-count {
				position: absolute;
				bottom: 10rpx;
				right: 10rpx;
				display: flex;
				align-items: center;
				gap: 4rpx;
				padding: 4rpx 12rpx;
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 20rpx;
				color: #fff;
				font-size: 22rpx;
			}
		}
		
		.article-info {
			padding: 16rpx;
			
			.article-title {
				font-size: 26rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 12rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				line-height: 1.4;
			}
			
			.article-author {
				display: flex;
				align-items: center;
				gap: 8rpx;
				
				.author-avatar {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
				}
				
				.author-name {
					font-size: 22rpx;
					color: #999;
				}
				
				.ellipsis {
					font-size: 22rpx;
					color: #999;
				}
			}
		}
	}
	
	.empty-tip {
		grid-column: 1 / -1;
		text-align: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;
	}
}

.list-end-tip {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx 0;
	
	.end-line {
		flex: 1;
		height: 1rpx;
		background-color: #e5e5e5;
	}
	
	.end-text {
		margin: 0 20rpx;
		font-size: 24rpx;
		color: #999;
	}
}

.modal-content {
	padding: 20rpx;
}
</style>

